<template>
  <el-row :gutter="24" style="margin-top: 0px">
    <el-col :span="24" class="header">
      <span>小工具链接入口</span>
    </el-col>
    <el-col :offset="2" :span="18" style="margin-top: 50px">
      <template>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="name" label="名称" width="280"></el-table-column>
          <el-table-column prop="fuc" label="功能" width="500"></el-table-column>
          <el-table-column prop="address" label="链接" width="280">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)">进入</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-col>
  </el-row>
</template>

<style>

  .header{
    background-color: #b9d5f1;
    color: #092b54;
    text-align: center;
    line-height: 60px;
    font-family:"list-style-type: upper-roman;";
    font-size: 20px;
    height: 70px;
  }
</style>

<script>

  export default {
    methods:{
      handleClick:function (index, row) {
        console.log(row);
        console.log(index);
        // var url = Scope.row
        window.open(row.address)
      }
    },
    data() {
      return {
        tableData: [
          {
          name: 'Json工具',
          fuc: 'Json解析、格式化',
          address: 'http://www.bejson.com/'
          },
          {
            name: '远程构建',
            fuc: '项目远程发布，gitlab自动校验',
            address: '/stone/tool/pushProject'
          },
          {
            name: '机构借款',
            fuc: '创建借款订单',
            address: '/stone/tool/borrowMoney'
          },
        ]

      }
    }
  }
</script>
